<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <link rel="stylesheet" href="./static/css/bootstrap.min.css">
  <link rel="stylesheet" href="./static/css/register.css">
</head>

<body style="background-image: url(../static/imgs/bg.jpg);">
  <section>
  
    <div class="box">
      <div class="box" >
        <div class="alert alert-danger alert-dismissible fade show invisible text-center" style="width: 25rem; margin-top: -8rem;"
        role="alert">
        <strong>提示：</strong><label for="" id="msg" style="height: 0.5rem; width: 9rem;">555</label>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
      <div class="container">
        <div class="form">
          <h2>微说说</h2>
          <form id="registerForm" action="/registerDone" method="POST">
            <div class="inputBox">
              <input type="text" id="username" name="username" placeholder="账号">

            </div>
            <div class="inputBox">
              <input type="password" id="password" name="password" placeholder="密码">
            </div>
            <div class="inputBox">
              <input type="password" id="confirmpassword" name="confirmpassword" placeholder="确定密码">
            </div>
            <div class="inputBox">
              <button type="button" class="btn btn-outline-primary" onclick="jump()">注册</button>
              <button type="button" class="btn btn-outline-primary" onclick="cancle()" >取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
  <script src="./static/js/jquery-3.6.0.min.js"></script>
  <script src="./static/js/bootstrap.min.js"></script>
  <script>
    function jump() {
      let username = $('#username').val();
      let password = $('#password').val();
      let confirmpassword = $('#confirmpassword').val();
      if (username.length > 0 && password.length > 0 && password===confirmpassword) {
        $.ajax({
          url: "/registerDone",
          type: "POST",
          data: $('#registerForm').serialize(),
          dataType: "json",
          success: function (res) {
            console.log(res);
            if (res.code === 200) {
              window.location.href = "/login";
            } else {
              console.log(res.msg);
            }
          },
          error: function (msg) {
            console.log('网络或者服务器有问题');
          }
        })
      } else {
        alert_fn();
        return false;
      }
    }
    function alert_fn(msg) {
      msg=msg || "密码不能为空，密码和确定密码必须一致";
      $('#msg').text(msg);
      $('.invisible').removeClass('invisible');
      setTimeout(() => {
        $('.alert').addClass('invisible')
      },3000 );
    }
    function cancle(){
      window.location.href = '/login'
    }
  </script>
</body>

</html>